<template>
  <view class="push-card" :class="tagClass">
    <view class="push-hd">
      <text class="push-title">推送内容：{{ item.content }}</text>
    </view>
    <view class="tag">{{ item.tag }}</view>
    <view class="push-body">
      <view class="push-row">
        <text class="label">推送价格：</text>
        <text class="value">提醒价格{{ item.price }}</text>
      </view>
      <view class="push-row">
        <text class="label">推送止盈：</text>
        <text class="value">目标范围{{ item.targetRange }}</text>
      </view>
      <view class="push-row">
        <text class="label">推送止损：</text>
        <text class="value">止损位{{ item.stopLoss }}</text>
      </view>
      <view class="push-row">
        <text class="label">推送时间：</text>
        <text class="value">{{ item.time }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PushCard',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    tagClass() {
      if (this.item.tag === '止盈') return 'success'
      if (this.item.tag === '止损') return 'danger'
      if (this.item.tag === '失效') return 'gray'
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.push-card {
  position: relative;
  margin: 12px 12px 0;
  overflow: hidden;
  background: #f6f9fa;
  border-radius: 12rpx;
}
.push-hd {
  padding: 12px;
}
.push-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}
.tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 10px;
  font-size: 12px;
  color: #fff;
  background: #02c7b6;
  border-radius: 0 12rpx 0rpx;
}
.success .tag {
  color: #06cbb6;
  background: #c6f0ec;
}
.danger .tag {
  color: #ff2c2e;
  background: #f8d3d4;
}
.gray .tag {
  color: #999;
  background: #e4e6e7;
}

.push-body {
  padding: 4px 12px 12px;
}
.push-row {
  display: flex;
  margin-top: 6px;
}
.push-row .label {
  width: 80px;
  font-size: 13px;
  color: #666;
}
.push-row .value {
  flex: 1;
  font-size: 13px;
  color: #333;
}
</style>
